import React, { Component } from 'react'
import Icon from 'react-native-vector-icons/AntDesign';
import { ScrollView, View, StyleSheet, Text, TouchableOpacity, TextInput, FlatList, Image, Dimensions, RefreshControl, Alert } from 'react-native'
import { pxPage } from '../../common/CommonUtil';
import { throttle, globalColor } from '../../common/Common'
import Classify_type from '../../redux/actions/Classify_action'
import { connect } from 'react-redux'

const Item = ({ name, img, type, introduction, years, label, item, props }) => {
    return (
        <View style={styles.item}>
            <TouchableOpacity style={{ flexDirection: 'row' }}
                onPress={throttle(() => {
                    props.navigation.navigate('Detail', {
                        item: item
                    })
                }, 2000)}
            >
                <Image
                    style={styles.pic}
                    source={{ uri: img }}
                    resizeMode='cover'></Image>
                <View style={{ justifyContent: 'center' }}>
                    <Text style={styles.name} selectable={true} numberOfLines={1}>{name}</Text>
                    <Text style={styles.introduction} selectable={true} numberOfLines={1}>{introduction}</Text>
                    <TouchableOpacity
                        style={{
                            borderColor: 'rgb(248,242,220)',
                            borderStyle: 'solid',
                            borderWidth: 1,
                            borderRadius: 6,
                            backgroundColor: 'rgb(250,247,228)',
                            width: '15%',
                            height: pxPage(22),
                            marginLeft: pxPage(15),
                            marginTop: pxPage(30)
                        }}
                    >
                        <Text style={styles.type} numberOfLines={1}>{years}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={{
                            borderColor: 'rgb(248,242,220)',
                            borderStyle: 'solid',
                            borderWidth: 1,
                            borderRadius: 6,
                            backgroundColor: 'rgb(250,247,228)',
                            width: '15%',
                            height: pxPage(22),
                            marginLeft: pxPage(65),
                            marginTop: -pxPage(22)
                        }}
                    >
                        <Text style={styles.type} numberOfLines={1}>{label}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={{
                            borderColor: 'rgb(248,242,220)',
                            borderStyle: 'solid',
                            borderWidth: 1,
                            borderRadius: 6,
                            backgroundColor: 'rgb(250,247,228)',
                            width: '35%',
                            height: pxPage(22),
                            marginLeft: pxPage(116),
                            marginTop: -pxPage(22)
                        }}
                    >
                        <Text style={styles.type} numberOfLines={1}>{type}</Text>
                    </TouchableOpacity>
                </View>
            </TouchableOpacity>
        </View>
    );
}
class Classify extends Component {
    constructor(props) {
        super(props)
        this.renderItem = this.renderItem.bind(this)

        this.state = {
            region: '全部',
            time: '全部',
            language: '全部',
            type: '全部',
            selectTab: 0,
            page: 1,
            firsrpage: 1,
            shownumber: 9,
            // lastpage: Math.ceil(this.props.classify.length / 9),
            lastpage: Math.ceil(4899 / 9),
            regionlist: [
                { text: '全部', id: 0, active: true },
                { text: '大陆', id: 1, active: false },
                { text: '日本', id: 2, active: false },
                { text: '美国', id: 3, active: false },
                { text: '英国', id: 4, active: false },
                { text: '台湾', id: 5, active: false },
                // { text: '韩国', id: 6 },
                // { text: '法国', id: 7 },
                // { text: '香港', id: 8 }
            ],
            timelist: [
                { text: '全部', id: 0, active: true },
                { text: '2020', id: 1, active: false },
                { text: '2019', id: 2, active: false },
                { text: '2018', id: 3, active: false },
                { text: '2017', id: 4, active: false },
                { text: '2016', id: 5, active: false },
                { text: '2015', id: 6, active: false },
                { text: '2014', id: 7, active: false },
                { text: '2013', id: 8, active: false },
                { text: '2012', id: 9, active: false },
                { text: '2011', id: 10, active: false },
                { text: '2010', id: 11, active: false },
                { text: '2009', id: 12, active: false },
                { text: '2008', id: 13, active: false },
                { text: '2007', id: 14, active: false },
                { text: '2006', id: 15, active: false },
                { text: '2005', id: 16, active: false },
                { text: '2004', id: 17, active: false },
                { text: '2003', id: 18, active: false },
                { text: '2002', id: 19, active: false },
                { text: '2001', id: 20, active: false },
                { text: '2000', id: 21, active: false },
                { text: '1999', id: 22, active: false }
            ],
            lanlist: [
                { text: '全部', id: 0, active: true },
                { text: '国语', id: 1, active: false },
                { text: '日语', id: 2, active: false },
                { text: '粤语', id: 3, active: false },
                { text: '英语', id: 4, active: false },
                { text: '韩语', id: 5, active: false },
                { text: '方言', id: 6, active: false }
            ],
            typelist: [
                { text: '全部', id: 0, active: true },
                { text: '热血', id: 1, active: false },
                { text: '格斗', id: 2, active: false },
                { text: '恋爱', id: 3, active: false },
                { text: '美少女', id: 4, active: false },
                { text: '校园', id: 5, active: false },
                { text: '搞笑', id: 6, active: false },
                { text: 'LOLI', id: 7, active: false },
                { text: '神魔', id: 8, active: false },
                { text: '机战', id: 9, active: false },
                { text: '科幻', id: 10, active: false },
                { text: '真人', id: 11, active: false },
                { text: '青春', id: 12, active: false },
                { text: '魔法', id: 13, active: false },
                { text: '神话', id: 14, active: false },
                { text: '冒险', id: 15, active: false },
                { text: '运动', id: 16, active: false },
                { text: '竞技', id: 17, active: false },
                { text: '童话', id: 18, active: false },
                { text: '亲子', id: 19, active: false },
                { text: '教育', id: 20, active: false },
                { text: '励志', id: 21, active: false },
                { text: '剧情', id: 22, active: false },
                { text: '社会', id: 23, active: false },
                { text: '后宫', id: 24, active: false },
                { text: '战争', id: 25, active: false },
                { text: '吸血鬼', id: 26, active: false }
            ]

        }

        // this.props.dispatch(Classify_type(this.state.type, this.state.time, this.state.language, this,state,region,this.state.page))
        this.props.dispatch(Classify_type('全部', '全部', '全部', '全部', 1))
    }

    onChangeText = (text) => {

        if (text > 0 || text <= this.state.lastpage) {
            this.setState({ page: text })

        } else {
            Alert.alert(
                "",
                "请输入正确的跳转页数哦~",
                [
                    {
                        text: "确定",
                        onPress: () => console.log("ok"),
                        style: "cancel"
                    },
                ]
            );
        }

    }

    componentDidUpdate(prevPro) {
        if (prevPro.classify.length != this.props.classify.length) {
            this.setState({
                lastpage: Math.ceil(this.props.classify.length / 9)
            })

        }
    }
    renderItem = ({ item }) => (
        <Item name={item.name} img={item.img} type={item.type} introduction={item.introduction} years={item.years} label={item.label} item={item} props={this.props} />

    );
    //const [selectTab, setSelectTab] = useState(0);
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.listTab}>

                    <Text style={styles.listLeft}>按地区 <Icon size={14} name="doubleright" style={{ color: '#ccc', textAlign: 'center' }} /></Text>
                    <ScrollView style={styles.listRight} horizontal={true} >
                        {
                            this.state.regionlist?.map((val, idx) => (
                                <TouchableOpacity
                                    style={styles.lists}
                                    key={idx}
                                    onPress={() => {
                                        let obj = this.state;

                                        let tmparr = this.state.regionlist
                                        tmparr?.map((item) => {
                                            if (item.active == true) {
                                                item.active = false
                                            }
                                            if (item.text == val.text) {
                                                item.active = true
                                            }
                                        })
                                        obj.region = val.text
                                        obj.lastpage = Math.ceil(this.props.classify.length / 9)
                                        obj.regionlist = tmparr
                                        this.setState(obj)

                                        this.props.dispatch(Classify_type(this.state.type, this.state.time, this.state.language, this.state.region, this.state.page))

                                    }}
                                >
                                    <Text style={val.active ? styles.activelistText : styles.listText}>
                                        {val.text}
                                    </Text>
                                </TouchableOpacity>
                            ))
                        }
                    </ScrollView>

                    {/* 按时间分类 */}
                    <Text style={styles.listLeft}>按时间 <Icon size={14} name="doubleright" style={{ color: '#ccc' }} /></Text>
                    <ScrollView style={styles.listRight} horizontal={true}>
                        {
                            this.state.timelist?.map((val, idx) => (
                                <TouchableOpacity
                                    style={styles.lists}
                                    key={idx}
                                    onPress={throttle(() => {
                                        let obj = this.state;

                                        let tmparr = this.state.timelist
                                        tmparr?.map(item => {
                                            if (item.active == true) {
                                                item.active = false
                                            }
                                            if (item.text == val.text) {
                                                item.active = true
                                            }
                                        })
                                        obj.time = val.text
                                        obj.lastpage = Math.ceil(this.props.classify.length / 9)
                                        obj.timelist = tmparr

                                        this.setState(obj)

                                        this.props.dispatch(Classify_type(this.state.type, this.state.time, this.state.language, this.state.region, this.state.page))
                                    }, 2000)}
                                >
                                    <Text style={val.active ? styles.activelistText : styles.listText}>
                                        {val.text}
                                    </Text>
                                </TouchableOpacity>
                            ))
                        }
                    </ScrollView>

                    {/* 按语言分类 */}
                    <Text style={styles.listLeft}>按语言 <Icon size={14} name="doubleright" style={{ color: '#ccc' }} /></Text>
                    <ScrollView style={styles.listRight} horizontal={true}>
                        {
                            this.state.lanlist?.map((val, idx) => (
                                <TouchableOpacity
                                    style={styles.lists}
                                    key={idx}
                                    onPress={throttle(() => {
                                        let obj = this.state;

                                        let tmparr = this.state.lanlist
                                        tmparr?.map(item => {
                                            if (item.active == true) {
                                                item.active = false
                                            }
                                            if (item.text == val.text) {
                                                item.active = true
                                            }
                                        })
                                        obj.language = val.text
                                        obj.lastpage = Math.ceil(this.props.classify.length / 9)
                                        obj.lanlist = tmparr
                                        this.setState(obj)

                                        this.props.dispatch(Classify_type(this.state.type, this.state.time, this.state.language, this.state.region, this.state.page))
                                    }, 2000)}
                                >
                                    <Text style={val.active ? styles.activelistText : styles.listText}>
                                        {val.text}
                                    </Text>
                                </TouchableOpacity>
                            ))
                        }
                    </ScrollView>

                    {/* 按类型分类 */}
                    <Text style={styles.listLeft}>按类型 <Icon size={14} name="doubleright" style={{ color: '#ccc' }} /></Text>
                    <ScrollView style={styles.listRight} horizontal={true}>
                        {
                            this.state.typelist?.map((val, idx) => (
                                <TouchableOpacity
                                    style={styles.lists}
                                    key={idx}
                                    onPress={throttle(() => {
                                        let obj = this.state;

                                        let tmparr = this.state.typelist
                                        tmparr?.map(item => {
                                            if (item.active == true) {
                                                item.active = false
                                            }
                                            if (item.text == val.text) {
                                                item.active = true
                                            }
                                        })
                                        obj.type = val.text
                                        // obj.lastpage = Math.ceil(this.props.classify.length / 9)
                                        obj.typelist = tmparr

                                        this.setState(obj);
                                        this.props.dispatch(Classify_type(this.state.type, this.state.time, this.state.language, this.state.region, this.state.page))

                                        this.setState({ lastpage: Math.ceil(this.props.classify.length / 9) })
                                    }, 2000)}
                                >
                                    <Text style={val.active ? styles.activelistText : styles.listText}>
                                        {val.text}
                                    </Text>
                                </TouchableOpacity>
                            ))
                        }
                    </ScrollView>
                </View>

                <Text style={{ marginLeft: pxPage(15), marginTop: pxPage(0), fontSize: 15, color: '#000' }}><Icon size={15} name="heart" style={{ marginRight: pxPage(13), color: '#f1687a' }} />  分类动漫</Text>

                {/* 点击进行类型数据的渲染，已经实现了点击渲染这个就冗余了，先不要了 */}
                {/* <TouchableOpacity
                    style={{
                        borderWidth: 1,
                        borderColor: '#F1687A',
                        width: pxPage(100),
                        height: pxPage(30),
                        borderRadius: 15,
                        justifyContent: 'center', alignItems: 'center',
                        marginLeft: pxPage(15),
                        backgroundColor: '#fea6c4'
                    }}
                    onPress={throttle(() => {
                        this.props.dispatch(Classify_type(this.state.type, this.state.time, this.state.language, this.state.region, this.state.page))
                        const obj = this.state
                        obj.lastpage = Math.ceil(this.props.classify.length / 9)
                        // 点击进行分类的筛选
                        this.setState(obj)
                    }, 2000)}>

                    <Text style={{ fontSize: 15, color: '#000', color: '#fff' }}>
                        点击查找
                    </Text>
                </TouchableOpacity> */}

                <TouchableOpacity
                    style={styles.searchbar}
                    onPress={throttle(() => {
                        this.props.navigation.navigate('SearchPage', {
                            // title:obj.title
                        })
                    }, 2000)}
                >
                    <View style={styles.searchbox}>
                        <Text style={styles.input}>海贼王</Text>
                        <Icon size={20} name="search1" style={{ marginRight: pxPage(13), color: '#aaa' }} />
                    </View>
                </TouchableOpacity>
                {this.props.classify.data.length == 0 ?
                    <View style={{ alignItems: 'center', justifyContent: 'center' }}><Text style={{ color: '#222' }}>没有这种分类哦~看看别的吧</Text></View>
                    :
                    <FlatList
                        data={this.props.classify.data}
                        renderItem={this.renderItem}
                        keyExtractor={item => item.id}
                    />
                }

                {/* 分页栏 */}
                <View style={{
                    height: pxPage(35),
                    flexDirection: 'row',
                    justifyContent: 'center',
                    alignItems: 'center',
                }}>
                    {/* 首页 */}
                    <TouchableOpacity
                        onPress={throttle(() => {
                            if (this.state.page == 1) {
                                Alert.alert(
                                    "",
                                    "已经在首页了，不能再点了哦~",
                                    [
                                        {
                                            text: "确定",
                                            onPress: () => console.log("ok"),
                                            style: "cancel"
                                        },
                                    ]
                                );
                            } else {
                                this.setState({ page: 1 })
                                this.props.dispatch(Classify_type(this.state.type, this.state.time, this.state.language, this.state.region, 1))
                            }

                        }, 2000)}
                    >
                        <Text style={{ color: '#F1687A' }}>首页  </Text>
                    </TouchableOpacity>

                    {/* 上一页 */}
                    <TouchableOpacity
                        onPress={throttle(() => {
                            var tmp = this.state.page
                            if (tmp <= 1) {
                                Alert.alert(
                                    "",
                                    "已经在首页了，不能再点了哦~",
                                    [
                                        {
                                            text: "确定",
                                            onPress: () => console.log("ok"),
                                            style: "cancel"
                                        },
                                    ]
                                )
                            } else {
                                tmp = tmp - 1;
                                this.setState({ page: tmp })
                                this.props.dispatch(Classify_type(this.state.type, this.state.time, this.state.language, this.state.region, tmp))
                            }

                        }, 2000)}
                    >
                        <Text style={{ color: '#F1687A' }}>上一页  </Text>
                    </TouchableOpacity>

                    <Text style={{ color: '#F1687A' }}>第 </Text>
                    <TextInput
                        value={this.state.page <= '' + this.state.lastpage ? '' + this.state.page : this.state.lastpage}
                        onChangeText={text => {
                            this.onChangeText(text)
                        }}
                        placeholder={'' + this.state.page}
                        style={{
                            paddingTop: 0,
                            paddingBottom: 0,
                            borderWidth: 1,
                            borderColor: '#FEA6C4'
                        }}></TextInput>
                    <Text style={{ color: '#F1687A' }}> /{this.state.lastpage}页</Text>

                    {/* 下一页 */}
                    <TouchableOpacity
                        onPress={throttle(() => {
                            if (this, this.state.page > this.state.lastpage) {
                                Alert.alert(
                                    "超过最大页数",
                                    "没有这么多页了哦，最后一页在这里~",
                                    [
                                        {
                                            text: "确定",
                                            onPress: () => console.log("ok"),
                                            style: "cancel"
                                        },
                                    ]
                                )
                                this.props.dispatch(Classify_type(this.state.type, this.state.time, this.state.language, this.state.region, this.state.lastpage))
                            } else this.props.dispatch(Classify_type(this.state.type, this.state.time, this.state.language, this.state.region, this.state.page))
                        }, 2000)}>
                        <Text style={{ color: '#F1687A' }}>  跳转  </Text>
                    </TouchableOpacity>

                    {/* 下一页 */}
                    <TouchableOpacity
                        onPress={throttle(() => {
                            var tmp = this.state.page
                            if (tmp >= this.state.lastpage) {
                                Alert.alert(
                                    "",
                                    "已经在尾页了，不能再点了哦~",
                                    [
                                        {
                                            text: "确定",
                                            onPress: () => console.log("ok"),
                                            style: "cancel"
                                        },
                                    ]
                                )
                            } else {
                                tmp = tmp + 1;
                                this.setState({ page: tmp })

                                this.props.dispatch(Classify_type(this.state.type, this.state.time, this.state.language, this.state.region, tmp))
                            }

                        }, 2000)}
                    >
                        <Text style={{ color: '#F1687A' }}>下一页</Text>
                    </TouchableOpacity>

                    {/* 尾页 */}
                    <TouchableOpacity
                        onPress={throttle(() => {
                            if (this.state.page == this.state.lastpage) {
                                Alert.alert(
                                    "",
                                    "已经在尾页了，不能再点了哦~",
                                    [
                                        {
                                            text: "确定",
                                            onPress: () => console.log("ok"),
                                            style: "cancel"
                                        },
                                    ]
                                );
                            } else {

                                this.setState({ page: this.state.lastpage })
                                this.props.dispatch(Classify_type(this.state.type, this.state.time, this.state.language, this.state.region, this.state.lastpage))
                            }

                        }, 2000)}
                    >
                        <Text style={{ color: '#F1687A' }}>  尾页  </Text>
                    </TouchableOpacity>

                </View>
            </View>
        )
    }
}


const mapStateToProps = (state) => {
    return {
        classify: state.classify
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    listTab: {
        width: '100%',
        marginLeft: pxPage(15),
        marginRight: pxPage(15),
        marginTop: pxPage(35),
        paddingBottom: pxPage(15),
    },
    listLeft: {
        color: '#f1687a',
        width: pxPage(90),
        fontSize: 15,
        fontWeight: 'bold'
    },
    listRight: {
        marginLeft: pxPage(85),
        marginTop: -pxPage(24),
        marginRight: pxPage(15)
    },
    lists: {

    },
    listText: {
        width: pxPage(60),
        height: pxPage(30),
        fontSize: 15,
        color: 'black'
    },
    activelistText: {
        width: pxPage(60),
        height: pxPage(30),
        fontSize: 15,
        color: '#f1687a'
    },
    searchbar: {
        width: pxPage(200),
        height: pxPage(30),
        marginTop: -pxPage(25),
        marginLeft: pxPage(200),
        marginRight: pxPage(15),
        marginBottom: pxPage(15),
    },
    searchbox: {
        flexDirection: 'row',
        alignItems: 'center',
        width: '100%',
        height: pxPage(30),
        marginRight: pxPage(15),
        borderRadius: 15,
        borderColor: '#f5f5f5',
        borderWidth: 1,
        backgroundColor: '#f5f5f5'
    },
    input: {
        padding: 0,
        flex: 1,
        marginLeft: pxPage(15),
        fontSize: 15,
        color: '#aaa'
    },
    item: {
        width: Dimensions.get('window').width,
        marginLeft: pxPage(15),
        marginBottom: pxPage(20)
    },
    name: {
        fontSize: 16,
        marginLeft: pxPage(15),
        marginTop: pxPage(25)
    },
    introduction: {
        fontSize: 13,
        width: pxPage(260),
        marginLeft: pxPage(15),
        marginTop: pxPage(10),
        color: 'rgb(112,107,109)',
    },
    type: {
        color: 'rgb(177,156,35)',
        fontSize: 12,
        textAlign: 'center'
    },
    pic: {
        width: pxPage(116),
        height: pxPage(151),
        borderRadius: 3
    }
});

export default connect(mapStateToProps)(Classify)
